<template>
  <header class="header">
    <button class="reset-btn"
            @click="goback"><Icon type="md-arrow-back" />返回作品</button>
    <div class="right-panel">
      <Button @click="deploy"
                 class="preview"
                 type="info"
                 :loading="loading">预览</Button>
    </div>
  </header>
</template>

<script>
import tool from '../../../../libs/tool'
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'HeaderEdit',
  props: {
    goback: Function
  },
  data () {
    return {
      loading: false
    }
  },
  computed: {
    ...mapState({
      editorTheme: state => state.h5Editor.editorTheme
    })
  },
  methods: {
    ...mapActions([
      'saveTheme'
    ]),
    deploy () {
      this.loading = true
      this.saveTheme(tool.vue2json(this.editorTheme)).then(() => {
        setTimeout(() => {
          this.$emit('saveThemeSuccess')
          this.loading = false
        }, 1000)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  height: 60px;
  background-color: #373f42;
  color: #fff;
  .reset-btn {
    height: 100%;
    padding: 0 20px;
    cursor: pointer;
  }
  .el-icon-arrow-left {
    margin-right: 20px;
  }
  .right-panel {
    float: right;
    height: 100%;
    width: 100px;
    display: flex;
    align-items: center;
    padding-right: 15px;
    flex-direction: row-reverse;
  }
}
</style>
